<template>
    <sky-card>
        <view class="after-box">
            <text>请选择售后类型：</text>
            <view class="tabs-box">
                <view class="tabs-item" :class="{active:value===item.value}"
                      v-for="(item,index) in options" :key="index"
                      @tap="change(item.value)">
                    {{ item.label }}
                </view>
            </view>
        </view>
    </sky-card>
</template>
<script setup>

const props = defineProps({
    modelValue: {
        type: String,
        default: ''
    }
})
const value = useModel(props, 'modelValue')

const options = [
    {
        label: '仅退款',
        value: 2
    },
    {
        label: '退货退款',
        value: 1
    }
]

const change = (val) => {
    value.value = val
}
</script>
<style scoped lang="scss">
.after-box {
    display: flex;
    align-items: center;
    gap: 24rpx;
    
    .tabs-box {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24rpx;
        
        .tabs-item {
            text-align: center;
            background-color: #f5f5f5;
            padding: 18rpx 0;
            border-radius: 12rpx;
            overflow: hidden;
        }
        
        .active {
            color: #fff;
            background-color: #b07f63;
        }
    }
}
</style>
